<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="jakarta.faces.html"
      xmlns:f="jakarta.faces.core"
      xmlns:p="primefaces" 
      xmlns:pe="primefaces.extensions"
      xmlns:ui="jakarta.faces.facelets">

    <h:head>
        <h:outputStylesheet library="webjars" name="primeflex/3.3.1/primeflex.min.css" />     
    </h:head>

    <h:body style="margin: 0; padding: 0;">
        <p:growl showDetail="true" >
            <p:autoUpdate/>
        </p:growl> 
        <pe:layout fullPage="true">
            <pe:layoutPane position="north" resizable="false" closable="false">
                <h:form prependId="false">
                    <div class="surface-section px-5 py-3">
                        <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
                            <div class="font-medium text-3xl text-900">
                                <a href="#{application.contextPath}/home.xhtml">3 Stones.X Blogs</a>
                            </div>
                            <div class="mt-3 lg:mt-0">
                                <p:commandButton type="button" value="Add" icon="pi pi-user-plus"
                                                 styleClass="ui-button-outlined mr-2"/>
                                <p:commandButton type="button" value="Save" icon="pi pi-check"/>
                            </div>
                        </div>
                    </div>
                </h:form>
            </pe:layoutPane>
            <pe:layoutPane position="west">
                <ui:insert name="left"> LEFT </ui:insert>
            </pe:layoutPane>
            <pe:layoutPane position="center">
                <ui:insert name="content"> Hello World </ui:insert>
            </pe:layoutPane>
            <pe:layoutPane position="south">
                footer
            </pe:layoutPane>
        </pe:layout>
    </h:body>
</html>